<template>
  <div class="content" v-loading="loading">
    <el-tree
      :node-key="'userId'"
      :default-checked-keys="defaultCheckedKeys"
      :data="ServiceProviderData"
      :props="defaultProps"
      @node-click="nodeClick"
    ></el-tree>
  </div>
</template>

<script>
/* util */
import { findComponentUpward, findComponentDownward } from '@src/util/assist';

/* api */
import { getSpUserForSpAllot } from '@src/api/TaskApi';
export default {
  name: 'ShbPcFeDynamicContentTree',

  data() {
    return {
      ServiceProviderData: [{}],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      loading:false
    };
  },

  props: {
    options: {
      type: Object,
      default: () => {},
    },
    context: {
      type: Object,
      default: () => {},
    },
    defaultCheckedKeys: {
      type: Array,
      default: () => [],
    },
  },

  watch:{
    options:{
      deep:true,
      handler(){
        this.GetServiceProviderData()

      }
    }
  },

  mounted() {
    this.GetServiceProviderData();
  },

  methods: {
    nodeClick(data) {
      let SelectUser = {
        // 用户 id
        userId: '',
        // 用户 staffId ，用于企微端显示人员名称
        staffId: '',
        // 类型 id
        typeId: '',
        // 用户名称
        displayName: '',
        // 用户头像
        head: '',
        // 用户手机号
        phone: '',
        // 用户状态
        state: '',
        // 用户状态颜色
        stateColor: '',
        // 人员标签列表
        labelNameList: [],
        // 是否为团队主管
        isTeamLeader: 0,
      };
      this.context.$emit('add', Object.assign(SelectUser, data));

      const BaseSelectUserComponent = findComponentUpward(
        this.context,
        'base-select-user'
      );

      BaseSelectUserComponent?.handlerConfirm();
    }, 
    GetServiceProviderData() {
      this.loading = true
      getSpUserForSpAllot({
        pageNum: 0,
        ...this.options
      }).then(res => {
        this.loading = false
        if (res.status === 0) {
          this.ServiceProviderData =
            res.data?.list.map(item => {
              item.label = item.serviceProviderName;
              return item;
            }) || [];
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tree-node > .el-tree-node__content {
  height: 36px;
}
::v-deep .is-current > .el-tree-node__content {
  background-color: $color-primary-light-1;
}

::v-deep .is-checked > .el-tree-node__content {
  background-color: $color-primary-light-1;
}
.content{
  min-height: 400px;
  height: 100%;
  overflow: auto;
}
</style>
